<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn">点击发送请求</button>
    <script src="./lib/axios.js"></script>
    <script>
        // http状态码

        // 200   --> ok 请求成功

        // 3xx 重定向相关的    304 ==> not modified 资源未修改/ 缓存相关
        
        // 客户端的错误 4xx
        // 400   --> 参数错了等
        // 401   --> 未授权
        // 404   --> 文件资源找不到

        // 服务器的错误 5xx


        // 业务状态码  ---> 响应体里面，后端定义好了，给我们的

        // 有时候，即使参数错误了，后端也可能给我们一个200ok的请求成功状态码，
        // 然后，在响应体中，用业务状态码来表示，这个请求有问题  {code:400; }  ==> http状态码200ok

        // const api_lol = 'https://autumnfish.cn/api/lol/search'   // GET 参数 q 
        // const btn = document.querySelector('.btn')

        btn.addEventListener('click', () => {
            // 1. config
            // axios({
            //     url:api_lol,
            //     params:{
            //         q:'提莫'
            //     }
            // })
            // 2. 简化模式
            axios.get(`${api_lol}?q='提莫''`).then(res => {
                console.log(res)
            })

        })

        // 基地址怎么设置？
        axios.defaults.baseURL = 'http://ajax-api.itheima.net'

        // 测试登录接口 
        const api_login = '/api/login'
        const btn = document.querySelector('.btn')

        btn.addEventListener('click', () => {
            // 1. config
            // axios({
            //     url:api_login,
            //     method: 'POST',
            //     data:{
            //         username:'admin',
            //         password:'123456'
            //     }
            // })
            // 2. 简化模式
            axios.post(api_login, {
                    username:'admin',
                    password:'12345666'
            }).then(res => {
                console.log(res)
            }).catch(err => {
                alert(err.response.data.message)
                console.dir(err)
                console.log(err)
            })

        })
        
    </script>
</body>
</html>